<template>
  <view 
    class="custom-card"
    :class="[
      `card-${variant}`,
      { 'card-hover': hover, 'card-clickable': clickable }
    ]"
    @tap="handleClick"
  >
    <!-- 卡片头部 -->
    <view v-if="$slots.header || title" class="card-header">
      <slot name="header">
        <view class="card-title">{{ title }}</view>
        <view v-if="subtitle" class="card-subtitle">{{ subtitle }}</view>
      </slot>
    </view>
    
    <!-- 卡片内容 -->
    <view class="card-content">
      <slot></slot>
    </view>
    
    <!-- 卡片底部 -->
    <view v-if="$slots.footer" class="card-footer">
      <slot name="footer"></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// 组件属性
interface Props {
  title?: string
  subtitle?: string
  variant?: 'default' | 'elevated' | 'outlined' | 'filled'
  hover?: boolean
  clickable?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
  subtitle: '',
  variant: 'default',
  hover: false,
  clickable: false
})

// 事件
const emit = defineEmits<{
  click: [event: Event]
}>()

/**
 * 处理点击事件
 * @param event 点击事件
 */
const handleClick = (event: Event) => {
  if (props.clickable) {
    emit('click', event)
  }
}
</script>

<style lang="scss" scoped>
.custom-card {
  @apply rounded-lg overflow-hidden transition-all duration-300;
  
  // 默认样式
  &.card-default {
    @apply bg-white border border-gray-200;
  }
  
  // 阴影样式
  &.card-elevated {
    @apply bg-white shadow-lg;
  }
  
  // 边框样式
  &.card-outlined {
    @apply bg-white border-2 border-gray-300;
  }
  
  // 填充样式
  &.card-filled {
    @apply bg-gray-50 border border-gray-200;
  }
  
  // 悬停效果
  &.card-hover {
    @apply cursor-pointer;
    
    &:hover {
      @apply transform -translate-y-1;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }
  }
  
  // 可点击样式
  &.card-clickable {
    @apply cursor-pointer;
    
    &:active {
      @apply transform scale-95;
    }
  }
}

// 卡片头部
.card-header {
  @apply px-4 py-3 border-b border-gray-100;
  
  .card-title {
    @apply text-lg font-semibold text-gray-900;
  }
  
  .card-subtitle {
    @apply text-sm text-gray-500 mt-1;
  }
}

// 卡片内容
.card-content {
  @apply px-4 py-3;
}

// 卡片底部
.card-footer {
  @apply px-4 py-3 border-t border-gray-100 bg-gray-50;
}

// 特殊变体样式
.custom-card.card-elevated {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.custom-card.card-outlined {
  border-color: #d1d5db;
}

.custom-card.card-filled {
  background-color: #f9fafb;
}

// 响应式设计
@media (max-width: 640px) {
  .card-header,
  .card-content,
  .card-footer {
    @apply px-3 py-2;
  }
}

// 动画效果
@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.custom-card {
  animation: cardFadeIn 0.3s ease-out;
}

// 毛玻璃效果变体
.custom-card.card-glass {
  backdrop-filter: blur(20rpx);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

// 渐变背景变体
.custom-card.card-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  
  .card-title {
    @apply text-white;
  }
  
  .card-subtitle {
    @apply text-white opacity-80;
  }
  
  .card-header,
  .card-footer {
    @apply border-white border-opacity-20;
  }
}
</style>
